<template>
  <div>
    <div class="titleh1">
      <code />地址信息
    </div>
    <el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm">
      <el-form-item label="入驻商">
        <el-input v-model="form.dfName" :disabled="true" placeholder />
      </el-form-item>

      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="装货地址" style="margin-right:15px">
              <el-input v-model="form.shipperAddress" :disabled="true" placeholder="装货地址" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.shipperDetailAddress" :disabled="true" placeholder="装货详细地址" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="卸货地址" style="margin-right:15px;">
              <el-input v-model="form.consigneeAddress" :disabled="true" placeholder="卸货地" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.consigneeDetailAddress" :disabled="true" placeholder="卸货详细地址" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="装货人" style="margin-right:15px;">
              <el-input v-model="form.shipperName" :disabled="true" placeholder="装货人姓名" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.shipperPhone" :disabled="true" placeholder="装货人电话" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple" style="margin-right:15px;">
            <el-form-item label="卸货人">
              <el-input v-model="form.consigneeName" :disabled="true" placeholder="卸货人姓名" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.consigneePhone" :disabled="true" placeholder="卸货人电话" />
          </div>
        </el-col>
      </el-row>
      <div class="titleh1">
        <code />货物信息
      </div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="货物名称" prop="name">
              <el-input v-model="form.coalTypeName" :disabled="true" placeholder="货物名称" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="货物数量" prop="name" style="margin-right:15px;">
                    <el-input v-model="form.weight" :disabled="true" placeholder="货物数量" />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-input v-model="form.coalUnitName" :disabled="true" placeholder="单位" />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="货物单价" prop="name" style="margin-right:15px;">
              <el-input v-model="form.coalPrice" :disabled="true" placeholder="货物单价" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.isTrunkName" :disabled="true" placeholder="单位" />
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="运费单价" prop="name" style="margin-right:15px;">
              <el-input v-model="form.price" :disabled="true" placeholder="运费单价" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-input v-model="form.isTrunkName" :disabled="true" placeholder="运费单位" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-row>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="合理耗损" style="margin-right:15px;">
                    <el-input
                      v-model="form.limitWastageAmount"
                      :disabled="true"
                      placeholder="合理耗损"
                    />
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple-light">
                  <el-input
                    v-model="form.limitWastageTypeName"
                    :disabled="true"
                    placeholder="损耗单位"
                  />
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="车数要求">
              <el-input v-model="form.coalNumber" :disabled="true" placeholder="请输入车数要求（包车数量，5车）" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div class="titleh1">
        <code />时间要求
      </div>
      <el-row>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-form-item label="装车时间" prop="date1">
              <div class="block">
                <el-input v-model="form.lastLoadingTime" :disabled="true" placeholder="装车时间" />
              </div>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <el-form-item label="卸车时间" prop="date1">
              <div class="block">
                <el-input v-model="form.lastUnloadingTime" :disabled="true" placeholder="卸车时间" />
              </div>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <div class="titleh1">
        <code />其他信息
      </div>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="指定司机">
              <el-input v-model="form.pushTargetName" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-form-item label="用车类型">
              <el-input v-model="form.pushVehicleUse" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="开票方式">
              <el-input v-model="form.billingTypeName" :disabled="true" placeholder="开票方式" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-form-item label="购买保险">
              <el-input v-model="form.insuranceFeeName" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="上游客户">
              <el-input v-model="form.upstreamName" :disabled="true" placeholder />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-form-item label="应收(元)">
              <el-input v-model="form.inFee" :disabled="true" placeholder clearable />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="运输要求">
              <el-input v-model="form.coalName" :disabled="true" placeholder clearable />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form-item label="允许报价">
              <el-radio v-model="form.isQuote" label="0">是</el-radio>
              <el-radio v-model="form.isQuote" label="1">否</el-radio>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-form-item label="最高价">
              <el-input v-model="form.maxPrice" :disabled="true" placeholder clearable />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="titleh1">
      <code />运输单详情
    </div>
    <vxe-table border show-header-overflow show-overflow highlight-hover-row :data="tableData">
      <vxe-table-column
        field="orderCode"
        title="运输单号"
        show-header-overflow
        show-overflow
        min-width="250"
        sortable
      />
      <vxe-table-column field="vehicleLicense" title="车牌号" />
      <vxe-table-column field="createdByName" title="司机" />
      <vxe-table-column field="consigneePhone" title="司机手机号" />
      <vxe-table-column field="gmtCreated" title="装货时间" />
      <vxe-table-column field="lastLoadingTime" title="签收时间" />
      <vxe-table-column field="status" title="运单状态" />
      <vxe-table-column title="操作" min-width="50" fixed="right">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="详情" placement="top">
            <vxe-button type="text" @click="orderDesil(scope.row.code)">
              <i class="el-icon-edit" />
            </vxe-button>
          </el-tooltip>
        </template>
      </vxe-table-column>
    </vxe-table>

    <vxe-modal v-model="tuteship" title="运输单详情" width="1000" height="700" resize>
      <ordergoods ref="detailRef" />
    </vxe-modal>
  </div>
</template>
<script>
import { regionDataPlus } from 'element-china-area-data'
import ordergoods from '@/components/WaybillDetails'
import { OrderDetails } from '@/api/orderform'
import { orderDetailList } from '@/api/transport'
export default {
  components: {
    ordergoods
  },
  data() {
    return {
      tuteship: false,
      form: {
        name: '',
        createdByName: '',
        consigneeAddress: '',
        consigneeDetailAddress: '',
        gmtCreated: '',
        gmtModified: '',
        dfName: '',
        dfPhone: '',
        shipperAddress: '',
        shipperDetailAddress: '',
        shipperName: '',
        shipperPhone: '',
        coalBigTypeName: '',
        coalUnitName: '',
        isQuote: '0'
      },
      tableData: []
    }
  },
  mounted() {},
  methods: {
    Getdetails(code) {
      OrderDetails(code).then(response => {
        this.form = response.data
        console.log(response)
      })
      orderDetailList({ mainOrderCode: code }).then(response => {
        this.tableData = response.data.records
      })
    },
    orderDesil(c) {
      this.$refs.detailRef.Getdetails(c)
      this.tuteship = true
    }
  }
}
</script>

<style  lang="scss" scoped>
.titleh1 {
  line-height: 50px;
  border-bottom: 1px solid #e2e2e2;
  margin-bottom: 15px;
  code {
    width: 5px;
    height: 20px;
    background-color: #ff7f21;
    float: left;
    margin-right: 5px;
    margin-top: 13px;
  }
}
.el-autocomplete {
  width: 81%;
}
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
